<template>
  <div>
    <van-button
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      :loading="loadingBtn"
      v-if="!articleInfo.is_followed"
      @click="btnFollowed"
    >关注</van-button>
    <van-button
      type="danger"
      round
      class="follow-btn"
      size="small"
      :loading="loadingBtn"
      v-else
      @click="btnFollowed"
    >已关注</van-button>
  </div>
</template>
           
<script>
import { follwedUser_api, delFollwedUser_api } from "@/api/search/index";
import { GET_TOKEN } from "@/utils/storage.js";
export default {
  /*  model: {
    prop: "articleInfo.is_followed", //@emit 传的值  value
    event: "foll" //触发的input事件
  }, */
  props: {
    articleInfo: {
      type: [Array, Object],
      required: true
    },
    value: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      loadingBtn: false //点击按钮出现加载状态
    };
  },
  methods: {
    //点击关注按钮， 切换关注和取消关注--------------
    async btnFollowed() {
      this.loadingBtn = true;

      //判断是不是自己的文章，自己不能关注自己的东西--------------------
      var userId = GET_TOKEN("userInfo").id;
      //   console.log(userId,111111);
      if (userId && userId == this.articleInfo.aut_id) {
        this.loadingBtn = false;
        return this.$toast("不能关注自己的");
      }
      try {
        //判断当前的关注状态----如果为真，就是已关注，点击就是取消关注------
        if (this.articleInfo.is_followed) {
          const { data: res } = await delFollwedUser_api(
            this.articleInfo.aut_id
          );
        } else {
          const { data: res } = await follwedUser_api({
            target: this.articleInfo.aut_id
          });
        }
      } catch (error) {
        if (error.response.status == 401) {
          this.loadingBtn = false;
          return this.$toast("请先登录");
        }
      }

      //子组件不能直接修改父组件的数据
      //   this.articleInfo.is_followed = !this.articleInfo.is_followed
      // this.$emit("foll", !this.articleInfo.is_followed);
      this.$emit("input", !this.articleInfo.is_followed);
      this.loadingBtn = false; //点击按钮出现加载状态
    }
  }
};
</script>
<style scoped lang="less">
/deep/.follow-btn {
  width: 170px;
  height: 58px;
}
</style>